<template>
    <div>
       <BreadCrumb></BreadCrumb>
       <div>
            <button @click="$router.go(-1)" class="btn primary">返回</button>
            <button @click="$router.go(0)"  class="btn primary">刷新</button>
       </div>
       <div>
           <div>
               <label for="">姓名:</label>
               <input type="text" v-model="student.name">
           </div>
           <div>
               <label for="">性别:</label>
               <input type="radio" name="sex" value="男" v-model="student.gender">男
               <input type="radio" name="sex" value="女" v-model="student.gender">女
           </div>
           <div>
                <label for="">年龄:</label>
               <input type="text" v-model="student.age">
           </div>
           <div>
               <label for="">专业</label>
               <select v-model="student.subjectsId._id" v-if="student.subjectsId">
                  <option v-for="item in subjectsList" :value="item._id" :key="item._id">{{item.name}}</option>
               </select>
           </div>
           <div>
               <label for="">班级</label>
               <select v-model="student.classesId._id" v-if="student.classesId">
                  <option v-for="item in classesList" :value="item._id" :key="item._id">{{item.name}}</option>
               </select>
           </div>
           <div>
               <img :src="student.image" alt="" class="avatar"><br>
               <input type="file" ref="avatarEle" @change="uploadAvatar">
               
           </div>
           <div>
               <button class="btn primary" @click="modifyStudent">修改</button>
           </div>
       </div>
      
    </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb.vue'
import request from '@/api/request'
export default {
   props:['id'],
   components:{
      BreadCrumb
   },
   data(){
      return{
         student:{},
         classesList:[],
         subjectsList:[]
      }
   },
   methods:{
      async getStudentById(){
         let result=await this.$api.students.getStudentsById(this.id);
         console.log(result.data);
         this.student=result.data
      },
      async getClasses(){
         let result=await this.$api.classes.getClasses()
         console.log(result.data.result);
         this.classesList=result.data.result
      },
      //获取专业
      async getSubjects(){
         let result=await this.$api.subjects.getSubjects()
         this.subjectsList=result.data.result
      },
      async modifyStudent(){
         console.log(this.student);
         let result=await this.$api.students.updateStudents(this.student)
         console.log(result);
      },
      async uploadAvatar(){
         let fd=new FormData()
         fd.append('file',this.$refs.avatarEle.files[0])
         let result=await request.post('/images/uploadImages',fd,{
            headers:{
               'Content-Type':'application/multipart/form-data'
            }
         })
         // console.log('result',`http://www.zhaijizhe.cn:3005/${result.data[0]}`);
         this.student.image=`http://www.zhaijizhe.cn:3005/${result.data[0]}`
      }
   },
   watch:{
      async 'student.subjectsId._id'(newval){
         let result=await this.$api.classes.getClassesBySubjectsId(newval)
         this.classesList=result.data.result
      }
   },
   created(){
      this.getSubjects()
      this.getStudentById()
   }
}
</script>

<style>
 .btn{
    width: 80px;
    height: 30px;
    border: none;
    margin: 5px;
    color: white;
  }
  .warn{
    background-color:tomato;
  }
  .primary{
    background: #008BD3;
  }
  .avatar{
   width: 150px;
  }
</style>